<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>3D转换</title>
    <style>
      div{
        border: 2px dotted red;
        height: 292px;
        width: 500px;
        margin: 200px;
        perspective: 1200px;
        perspective-origin: right top;
      }
      @-webkit-keyframes rotate1{
        /*100%{transform: rotateX(45deg);}*/
        /*100%{transform: rotateY(360deg);}*/
        /*100%{transform: rotateZ(360deg);}*/

        /*100%{transform: rotate3d(10,10,10,360deg);}*/

        /*0%{transform: translateZ(-100px);}
        50%{transform: translateZ(200px);}
        100%{transform: translateZ(-100px);}*/

        /*50%{transform: translate3d(200px,500px,100px);}
        100%{transform: translate3d(0,0,0);}*/

        /*100%{transform: scale3d(2,2,2);}*/
        100%{transform: scaleZ(5) translateZ(100px);}
      }
      img{
        animation:rotate1 2s ease 0.5s alternate infinite running;
        -webkit-animation:rotate1 2s ease 0.5s alternate infinite running;
        transform-origin: center center 100px;
        backface-visibility: visible;
        transform-style: preserve-3d;
      }
      img:hover{
        animation-play-state: paused;
        -webkit-animation-play-state:paused;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="view.jpg" alt="basketball">
    </div>
  </body>
</html>
